<template>
	<view>
		<view class="bg">
			<view style="position: relative;">
				<view class="title">洗车</view>
				<image src="/static/wwc/left.png" mode=""
					style="width: 60rpx; height: 75rpx; position: absolute; left: 15rpx; top: 10rpx;"></image>
			</view>

			<uni-card class="contain" :thumbnail="avatar" @click="onClick">
				<image style="padding-top: 10rpx; border-radius: 20rpx; width: 610rpx; height: 400rpx;"
					src="/static/wwc/washCar.png" mode=""></image>
				<view style="display: flex; justify-content: space-between;">
					<view style="font-size: 16px; color: black;">车百事汽车生活馆 (解放路店)</view>
					<!-- <view style="color: #3184fc; font-size: 12px;">556m</view> -->
				</view>
				<view style="display: flex; color: black;">
					<uni-rate :touchable="false" :value="5" @change="onChange" />
					<text>4分</text>
					<text style="padding-left:20rpx;">销量：556</text>
				</view>
				<view>营业时间： 周一至周五 早上8:00-晚上22:00</view>
				<view>
					<text>
						位置： 山阳区人民路与解放路交叉口
					</text>
					<image style="padding-left: 10rpx; width: 14px; height: 14px; vertical-align: middle;"
						src="/static/wwc/plane@2x.png" mode=""></image>
				</view>
			</uni-card>

			<uni-card class="contain" :thumbnail="avatar" @click="onClick">
				<view style="color: black;">
					<view style="font-size: 16px; padding-bottom: 10rpx;">服务项目</view>
					<view style="display: flex; justify-content: space-between; padding-bottom: 20rpx;">
						<view>公时价格（每小时）</view>
						<view>
							<text style="color: #ff2000;">￥35.9 </text>
							<text style="color: #9b9b9b; text-decoration: line-through;">￥60</text>
						</view>
					</view>
					<view
						style="display: flex; justify-content: space-between; padding-bottom: 20rpx; padding-bottom: 20rpx;">
						<view>轮胎</view>
						<view>
							<text style="color: #ff2000;">￥35.9 </text>
							<text style="color: #9b9b9b; text-decoration: line-through;">￥60</text>
						</view>
					</view>
					<view style="display: flex; justify-content: space-between; padding-bottom: 20rpx;">
						<view>......</view>
						<view>
							<text style="color: #ff2000;">￥35.9 </text>
							<text style="color: #9b9b9b; text-decoration: line-through;">￥60</text>
						</view>
					</view>
				</view>
			</uni-card>

			<uni-card class="contain" :thumbnail="avatar" @click="onClick">
				<view style="color: black; font-size: 16px; padding-bottom: 10rpx;">服务评价</view>
				<view v-for="item in 4" style="display: flex; color: black;">
					<image src="/static/wwc/surtr.png" style="width: 120rpx; height: 120rpx; border-radius: 50%;">
					</image>
					<view style="flex: 1; margin-left: 10rpx;">
						<view style="display: flex; justify-content: space-between; padding-bottom: 10rpx;">
							<view>史尔**</view>
							<view style="color: #9b9b9b; font-size: 12px;">2025-12-12</view>
						</view>
						<uni-rate style="padding-bottom: 10rpx;" :touchable="false" :value="5" @change="onChange1" />
						<view style="margin-bottom: 20rpx; font-size: 13px;">
							洗的很干净，态度也不错。
						</view>
					</view>
				</view>

			</uni-card>

			<view
				style="display: flex; align-items: center; width: 100%; height: 120rpx; background-color: white; position: fixed; bottom: 0;">
				<button
					style="border-radius: 100px; font-size: 14px; width: 660rpx; height: 70rpx; color: white; background-color: #2175f3; display: flex; align-items: center; justify-content: center;">
					<text>立即预约</text>
				</button>
			</view>

			<!-- <view style="font-size: 12px; color: #6a6a6a; text-align: center;">
				<text style="color: #e2e2e2;">—— </text>
				<text>暂无更多</text>
				<text style="color: #e2e2e2;"> ——</text>
			</view> -->
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const select = ref([])
	const change = (e) => {
		select.value = e.detail.value;
		console.log(select.value)
	}

	const range = ref([{
		"value": 0,
		"text": "小保养套餐（合成机油+机滤）",
		"content": "这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍"
	}, {
		"value": 1,
		"text": "小保养套餐2（合成机油+机滤）",
		"content": "这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍"
	}, {
		"value": 2,
		"text": "小保养套餐3（合成机油）",
		"content": "这里是精洗服务的详细介绍，这里是精洗服务的详细介绍，这里是精洗服务的详细介绍"
	}])
</script>

<style scoped>
	.bg {
		height: 400rpx;
		background-color: #3184fc;
	}

	.title {
		padding-top: 20rpx;
		font-size: 20px;
		color: white;
		padding-bottom: 20px;
		text-align: center;
	}

	.back {
		font-size: 20px;
		color: white;
	}

	.a {
		color: white;
		font-size: 12px;
	}

	.contain {
		border-radius: 20rpx;
	}
</style>